<template>
  <div class="flex space-x-4 md:justify-end">
    <a :href="`https://www.facebook.com/sharer.php?u=${ uri }`"
      rel="nofollow"
      class="text-gray-1800 share-item group to-share"
      target="_blank">
      <span class="sr-only">facebook</span>
      <svg-icon className="w-8 h-8 group-hover:hidden"
        iconName='icon_facebook_default'></svg-icon>
      <svg-icon className="w-8 h-8 hidden group-hover:block"
        iconName='icon_facebook_selected'></svg-icon>
    </a>

    <a :href="`https://twitter.com/intent/tweet?url=${ uri }`"
      rel="nofollow"
      class="text-gray-1800 share-item group to-share"
      target="_blank">
      <span class="sr-only">Twitter</span>
      <svg-icon className="w-8 h-8 group-hover:hidden"
        iconName='icon_Twitter_default'></svg-icon>
      <svg-icon className="w-8 h-8 hidden group-hover:block"
        iconName='icon_Twitter_selected'></svg-icon>
    </a>

    <a :href="`https://www.linkedin.com/sharing/share-offsite/?url=${ uri }`"
      rel="nofollow"
      class="text-gray-1800 share-item group to-share"
      target="_blank">
      <span class="sr-only">linkedin</span>
      <svg-icon className="w-8 h-8 group-hover:hidden"
        iconName='linkedin_default'></svg-icon>
      <svg-icon className="w-8 h-8 hidden group-hover:block"
        iconName='linkedin_selected'></svg-icon>
    </a>

    <a :href="`https://pinterest.com/pin/create/button/?url=${ uri }`"
      rel="nofollow"
      class="text-gray-1800 share-item group to-share"
      target="_blank">
      <span class="sr-only">pinterest</span>
      <svg-icon className="w-8 h-8 group-hover:hidden"
        iconName='icon_pinterest_default'></svg-icon>
      <svg-icon className="w-8 h-8 hidden group-hover:block"
        iconName='icon_pinterest_selected'></svg-icon>
    </a>

    <!-- <a :href="`https://reddit.com/submit?url=${ uri }`" rel="nofollow"
              class="text-gray-1800 share-item group" target="_blank">
              <span class="sr-only">reddit</span>
              <svg-icon className="w-8 h-8 group-hover:hidden"
                iconName='icon_reddit_default'></svg-icon>
              <svg-icon className="w-8 h-8 hidden group-hover:block"
                iconName='icon_reddit_selected'></svg-icon>
            </a> -->
  </div>
</template>

<script>
export default {
  name: 'share',
  data() {
    return {
      uri: `https://www.toolify.ai${this.$route.fullPath}`,
    }
  },
}
</script>